<template>
  <div fluid="true" class="custom-properties-panel">
    <div class="titleContent">
      <div class="title title3" data-text="HTML标签">属性</div>
    </div>
    <div v-if="modelValue" style="margin-bottom: 5px">
      <!-- <fieldset class="element-item">
        <label>ID</label>
      </fieldset> -->
      <fieldset class="element-item">
        <div>名称(英文字符串)</div>
        <input
          type="text"
          :value="modelValue ? modelValue.name : ''"
          @input="changeName"
          class="property-input"
        />
      </fieldset>
      <fieldset class="element-item">
        <div>标签</div>
        <input
          type="text"
          :value="modelValue ? modelValue.label : ''"
          @input="changeProperty"
          class="property-input"
        />
      </fieldset>
      <fieldset v-if="modelValue.type == 'text'" class="element-item">
        <div>验证</div>
        <input
          type="text"
          :value="modelValue ? modelValue.validation : ''"
          @input="changeValidation"
          class="property-input"
        />
      </fieldset>
      <fieldset v-if="modelValue.type == 'select'" class="element-item option-panel">
        <div>选项</div>
        <div v-for="(item, index) in modelValue.options" :key="index">
          <input
            type="text"
            :value="item"
            @input="(event) => changeOption(event, index)"
            class="property-input"
          />
          <input
            type="button"
            value="-"
            @click="removeOption(index)"
            class="button-circle"
          />
        </div>
        <div style="width: 100%; text-align:center">
          <input type="button" value="+" @click="addOption(item)" class="button-circle" />
        </div>
      </fieldset>
    </div>

    <!-- <pre>{{ modelValue }}</pre> -->
  </div>
  <input
    type="button"
    v-if="modelValue"
    @click="removeElement"
    value="删除"
    class="button"
    style="width: 100%"
  />
</template>

<script>
export default {
  name: "PropertiesView",
  emits: ["removeElementTag", "updateProperty"],
  props: {
    modelValue: {
      type: Object,
    },
  },
  data() {
    return {
      msg: "",
      modelProxy: this.modelValue,
    };
  },
  methods: {
    removeElement() {
      this.$emit("removeElementTag", this.modelValue);
    },
    changeContent(e) {
      let proxy = this.modelValue;
      proxy.children = e.target.value;
      this.$emit("updateProperty", proxy);
    },
    changeProperty(e) {
      let proxy = this.modelValue;
      proxy.label = e.target.value;
      this.$emit("updateProperty", proxy);
    },
    changeName(e) {
      let proxy = this.modelValue;
      proxy.name = e.target.value;
      this.$emit("updateProperty", proxy);
    },
    changeValidation(e) {
      let proxy = this.modelValue;
      proxy.validation = e.target.value;
      this.$emit("updateProperty", proxy);
    },
    changeOption(event, index) {
      let proxy = this.modelValue;
      proxy.options[index] = event.target.value;
      this.$emit("updateProperty", proxy);
    },
    removeOption(index) {
      let proxy = this.modelValue;
      proxy.options.splice(index, 1);
      this.$emit("updateProperty", proxy);
    },
    addOption() {
      let proxy = this.modelValue;
      proxy.options.push("");
      this.$emit("updateProperty", proxy);
    },
  },
};
</script>

<style scoped>
@import "@/assets/style/title.css";
@import "@/assets/style/base.css";

.custom-properties-panel {
  right: 0;
  top: 0;
  width: 300px;
  padding: 10px 0;
  margin-left: 10px;
}

.empty {
  height: 200px;
  line-height: 200px;
  font-weight: 700;
}

.element-item {
  padding: 2px;
  margin: 2px;
  border: 0;
  border-radius: 2px;
}

.option-panel input[type="text"],
.option-panel .label {
  width: 80%;
}

.element-item:first-child {
  margin-top: 0;
}

.custom-properties-panel input[type="text"],
.custom-properties-panel textarea {
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
  outline: none;
}

.custom-properties-panel input:focus,
.custom-properties-panel button:focus,
.custom-properties-panel textarea:focus,
.custom-properties-panel [contenteditable]:focus {
  border-color: rgb(239, 112, 96);
  box-shadow: 0 0 1px 2px rgb(239, 112, 96, 0.2);
}

.custom-properties-panel label {
  font-size: 13px;
}

.custom-properties-panel label:after {
  content: ": ";
}
</style>
